<template>
<h1>文本相关指令</h1>
<!-- 插值:让此处显示的文本内容和变量进行绑定 -->
  {{info}}
<!--让元素的文本内容和变量进行绑定-->
  <h1 v-text="info"></h1>
  <p v-text="info"></p>
<!-- v-html让元素的html标签内容和变量进行绑定 -->
  <p v-html="info"></p>
  <input type="button" value="按钮" @click="f()">
</template>
<script setup>
  import {ref} from "vue";
  //响应式变量, 当需要让页面显示的内容跟着变量改变一起改变时使用
  const info = ref('文本相关<b>标签</b>');
  //箭头函数, 作用:定义一个方法
  const f = ()=>{
    //因为info变量是响应式变量, 页面的内容和变量进行了绑定, Vue框架会不断监听响应式变量值的改变
    //当值发生改变,会自动找到与之绑定的页面元素并进行修改
    info.value = "值改变了!";
  }
</script>

<style scoped>

</style>